<template>
  <div>
    <div v-if="editable" class="crud-opts">
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="doSelectUser">选择成员</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="danger"
        icon="el-icon-delete"
        @click="doDeleteUser">删除</el-button>
      <userSelectList ref="userSelectList" :multi_select="true" @userSelectCallback="userSelectCallback" />
    </div>
    <DataGridTable
      :data="memberDetails"
      :show-summary="true"
      :show-page="false"
      summary-field=",userName,memberRatio"
      size="mini"
      stripe
      border
      max-height="300px"
      height="300px"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column prop="userName" label="成员"/>
      <el-table-column prop="memberRole" label="团队角色">
        <template slot-scope="scope">
          <el-select v-if="editable" v-model="scope.row.memberRole" style="width: 100%" size="mini" filterable clearable placeholder="团队角色">
            <el-option
              v-for="(item) in dicts.custom_member_role"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"/>
          </el-select>
          <template v-for="item in dicts.custom_member_role" v-else>
            <span v-if="scope.row.memberRole && scope.row.memberRole === item.dictCode" :key="item.id" >{{ item.dictName }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="memberRatio" label="提成比例">
        <template slot="header">
          提成比例<IconHelp display-content="合计100%" />
        </template>
        <template slot-scope="scope">
          <el-input-number v-model.number="scope.row.memberRatio" :disabled="!editable" :controls="false" :precision="2" :min="0" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.rmk" :disabled="!editable" size="mini" style="width: 100%"/>
        </template>
      </el-table-column>
    </DataGridTable>
  </div>
</template>

<script>
import userSelectList from '@/views/system/user/module/userSelectList'
export default {
  dictTypes: ['custom_member_role'],
  components: { userSelectList },
  props: {
    memberDetails: {
      type: Array,
      required: true
    },
    editable: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      loading: false,
      selectedDetailRows: [],
      style: 'width: 150px'
    }
  },
  methods: {
    doSelectUser() {
      const _this = this.$refs.userSelectList
      _this.loadData()
      _this.dialog = true
    },
    userSelectCallback(selectedRows, userSelectObj) {
      const tmpDetails = JSON.parse(JSON.stringify(this.memberDetails))
      selectedRows.forEach(tmprow => {
        const addRow = {}
        addRow.userId = tmprow.id
        addRow.userName = tmprow.userName
        addRow.memberRole = 'attend'
        addRow.id = null
        tmpDetails.push(addRow)
      })
      this.$emit('setDetails', tmpDetails)
      userSelectObj.cancel()
      userSelectObj.loading = false
    },
    handleSelectionChange(val) {
      this.selectedDetailRows = val
    },
    doDeleteUser() {
      let tmpDetails = JSON.parse(JSON.stringify(this.memberDetails))
      this.selectedDetailRows.forEach(tmprow => {
        tmpDetails = tmpDetails.filter(vo => vo.userId !== tmprow.userId)
      })
      this.$emit('setDetails', tmpDetails)
    }
  }
}
</script>
